<!DOCTYPE HTML>
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<html>
<head>
    <META HTTP-EQUIV="pragma" CONTENT="no-cache">
    <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
    <META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>权限管理系统</title>
    <link rel="stylesheet" href="/webdist/plugins/layui-v2.1.5/css/layui.css">
    <link rel="stylesheet" href="/webdist/css/main.css">
    <link rel="stylesheet" href="/webdist/plugins/font-awesome/css/font-awesome.min.css">
</head>
 <body style="background-color: #D2D6DE;">
    <div class="layui-container" >
        <div class="layui-col-md4 layui-col-md-offset4"style="margin-top: 10%;">
            <div style="font-size:25px;text-align:center ;margin: 10px 0px 10px 0px;">
                <strong >权限管理系统</strong>
            </div>
            <div style="background-color: #fff">
                <div  class="fLogin-from" id="loginForm">
                    <div  class="fLogin">
                        <i class="fa fa-user-o " ></i>
                        <input  type="text" name="userName" id="userName" required  lay-verify="required" placeholder="账号" autocomplete="off">
                    </div>
                    <div class="fLogin">
                        <i class="fa fa-lock " ></i>
                        <input type="password" name="password" id="password" required  lay-verify="required" placeholder="密码" autocomplete="off" >
                    </div>
                    <div class="validateCode ">
                        <div class="fLogin ">
                            <i class="fa fa-shield " ></i>
                            <input type="text" name="validateCode" id="validateCode" required  lay-verify="required" placeholder="验证码" autocomplete="off" >
                        </div>
                        <img id="validateImg" src="/validateCode/getCode?random=${sessionToken}"/>
                    </div>
                    <div class="fLogin-btn ">
                        <span id ="loginBtn" class="layui-btn"  lay-submit lay-filter="formDemo">登录</span>
                    </div>
                </div >
            </div>

        </div>
    </div>
 </body>

<script src="/webdist/plugins/layui-v2.1.5/layui.js"></script>
<script src="/webdist/res/js/config.js"></script>
<script type="text/javascript" >
    layuiconfig.use(["jquery","layer"],function(){
        var layer = layui.layer;
        var $=layui.jquery;
        function checkValidateCode() {
            var validateCode = $("#validateCode").val();
            $.ajax({
                type: "PUT",
                async:false,
                url: "/validateCode/validate",
                dataType: "json",
                data:{validateCode:validateCode},
                success: function(ret){
                    if(ret){
                        $("#loginBtn").addClass("btn-submit");
                    }else{
                        layer.msg("验证码错误");
                        changeCodeImg();
                    }
                }
            });
        };
        function changeCodeImg() {
            $("#validateImg").attr("src","/validateCode/getCode?random="+Math.random());
            $("#validateCode").val("");
            $("#loginBtn").removeClass("btn-submit");
        }
        
        function checkLogin() {
            var userName = $("#userName").val();
            var password = $("#password").val();
            if(userName == ""){
                layer.msg("请输入账号");
                return false;
            }
            if(password == "" ){
                layer.msg("请输入密码");
                return false;
            }
            return true;
        }

        $("body").on("click",".btn-submit",function () {
            debugger;
            if(checkLogin()){
                $.ajax({
                    type: "PUT",
                    async:false,
                    url: "/checkLogin",
                    dataType: "json",
                    data:{ userName : $("#userName").val(),
                           password : $("#password").val()
                    },
                    success: function(ret){
                        if(ret.succ){
                            window.location.replace("/index");
                        }else{
                            layer.msg(ret.message);
                            changeCodeImg();
                        }
                    }
                });
            }
        });

        $("#validateImg").on("click",function () {
            changeCodeImg();
        });
        $("#validateCode").on("keyup",function () {
            var code = $(this).val();
            if(code.length == 4){
                checkValidateCode();
            }
        })
    });
</script>
</html>